import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";
import message from "./message";
import "../../assets/css/ui/media.css";

class UiExampleMedia extends BaseComponent {
    constructor(name) {
        super(name);
    }
    _template() {        
        var self = this;    
        return `<div class="${self._name}">
<div class="aui-media">
    <div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item">
        <img style="width: 50px;" src="https://static.zhilizhili.com/static/3828461873613813290.jpg">
    </div>
    <div class="aui-layout__item aui-media__body">
        <h5 style="margin-top: 5px; margin-bottom: 5px; font-size:16px;">天地剑法</h5>
        <div>sds</div>
    </div>    
</div>

<div>
<h5>用户列表卡片</h5>
<hr>
</div>
 
<div class="aui-media app-user-card-media" style="width: 300px;">
    <div class="aui-layout aui-layout-grid">
        <div class="aui-layout__item">
            <img class="b-app-rounded-circle app-user-card-media__logo" 
                src="https://static.zhilizhili.com/static/3828461873613813290.jpg">
        </div>
        <div class="aui-layout__item aui-media__body">
            <h5 class="app-user-card-media__title">天地剑法</h5>
            <div class="app-user-card-media__content">文字很长时会被截断在一行内 就像这样</div>
        </div>
    </div>
</div>

${message.template}
</div>`;
    }
    _mounted() {
        var self = this;
    }
    _data() {
        var ret = {};
        return ret;
    }
}

window.AUICustomComponents.define("ui-example-media", UiExampleMedia);

export default createSubpageComponent(
    `<ui-example-media></ui-example-media>`
);